<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="addname">添加</el-button>
      </div>
      <el-table :data="logo" border style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="#"
          align="center"
          width="50"
        />
        <el-table-column
          prop="username"
          label="用户名"
          align="center"
          width="180"
        />
        <el-table-column
          prop="nick_name"
          label="昵称"
          align="center"
          width="180"
        />
        <el-table-column prop="salt" label="头像" align="center" width="200">
          <template slot-scope="scope">
            <img
              :src="scope.row.salt"
              alt=""
              style="width: 100px; height: 100px"
            >
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="角色" align="center" width="300" />
        <el-table-column
          prop="createTime"
          label="添加时间"
          align="center"
          width="320"
        />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >查看</el-button>
            <el-button type="text" size="small" style="color:red;" @click="delid(scope.row.id)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="page.start"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script >
export default {
  components: {},
  props: ['logo', 'page'],
  data() {
    return {}
  },
  computed: {},

  mounted() {},

  methods: {
    // 删除
    delid(id) {
      this.$emit('delcard', id)
    },
    addname() {
      this.$emit('addmen', 'en')
    },
    handleSizeChange(val) {
      this.page.limit = val
      this.$emit('pagepath', this.page)
      console.log(this.page)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.page.start = val
      this.$emit('pagepath', this.page)
      console.log(`当前页: ${val}`)
    },
    // 查看
    handleClick(row) {
      this.$emit('changed', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
</style>
